<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/packagewtt.css"/>
		<link rel="stylesheet" type="text/css" href="css/fontello-embedded.css"/>
	</head>
	<body style="margin: 1rem;">
		<h3>按钮</h3>
		<button class="btn-default btn-cal">取消</button>
		<button class="btn-default btn-sure">确定</button>
		<button class="btn-default btn-danger">警告</button>
		<button class="btn-default btn-function">功能</button>
		
		<button class="btn-hover btn-cal">取消</button>
		<button class="btn-hover btn-sure">确定</button>
		<button class="btn-hover btn-danger">警告</button>
		<button class="btn-hover btn-function">功能</button>
		
		<button class="btn-default btn-circle btn-cal">取消</button>
		<button class="btn-default btn-circle btn-sure">确定</button>
		<button class="btn-default btn-circle btn-danger">警告</button>
		<button class="btn-default btn-circle btn-function">功能</button>
		
		<button class="btn-default btn-small btn-cal">取消</button>
		<button class="btn-default btn-small btn-sure">确定</button>
		<button class="btn-default btn-small btn-danger">警告</button>
		<button class="btn-default btn-small btn-function">功能</button>
		
		<button class="btn-inlineShadow">阴影内置按钮</button>
		
		<h3>表单</h3>
		<input type="text" class="input-default" name="" id="" value="" />
		<select name="" class="select-default">
			<option value="">请选择</option>
			<option value="">1</option>
			<option value="">1</option>
			<option value="">1</option>
		</select>
		<br/><br/>
		
		<div class="input-scale-container" style="margin-left:100px;">
			<label style="margin-right: 100px;">
			   <input type="text" class="input-scale">
		  	   <span>用户名</span>	
			</label>  
			<label style="margin-right: 100px;">
			   <input type="password" class="input-scale">
		  	   <span>密码</span>	
			</label>  
			<label>
			   <input type="text" class="input-scale">
		  	   <span>验证码</span>	
			</label>  
		</div>
		<br/><br/>
		
		<div class="input-up-container" style="margin-left: 100px;">
			<label style="margin-right: 100px;">
			   <input type="text" class="input-up">
		  	   <span>用户名</span>	
			</label>  
			<label style="margin-right: 100px;">
			   <input type="password" class="input-up">
		  	   <span>密码</span>	
			</label>  
			<label>
			   <input type="text" class="input-up">
		  	   <span>验证码</span>	
			</label>  
		</div>
        <br/><br/>
        
        <div class="input-tooltip-container row" style="margin-left: 100px;">
        	<label style="margin-right: 100px;">
			   <input type="text" class="input-tooltip">
		  	   <span>用户名</span>	
			</label>  
			<label style="margin-right: 100px;">
			   <input type="password" class="input-tooltip">
		  	   <span>密码</span>	
			</label>  
			<label>
			   <input type="text" class="input-tooltip">
		  	   <span>验证码</span>	
			</label> 
        </div>
        
		
		<br/><br/>
		<div class="radio-default" date-type="0" style="margin-left: 20rem;">
			<i class="demo-icon icon-check"></i>
		</div><br/><br/>
		
		<textarea class="textarea-default" name="" rows="" cols=""></textarea>
		<br/>
		
			<div class="form-item">
			     <label class="packwtt-form-label" for="">用户名</label>
				 <input type="text" name="" id="" value="" />
		    </div>  
		    <div class="form-item">
			     <label class="packwtt-form-label" for="">密码</label>
				 <input type="password" name="" id="" value="" />
		    </div> 
		    <div class="form-item">
			     <label class="packwtt-form-label" for="">邮件</label>
				 <input type="text" name="" id="" value="" />
		    </div> 
		    <div class="form-item">
			     <label class="packwtt-form-label" for="">输入框</label>
				 <input type="text" name="" id="" value="" />
		    </div> 
		
		<br/><br/>
		
		<h3>表格</h3>
		<table border="1" class="table-default">
			<tr>
				<th>Header1</th>
				<th>Header2</th>
				<th>Header3</th>
				<th>Header4</th>
			</tr>
			<tr>
				<td>Data1</td>
				<td>Data2</td>
				<td>Data3</td>
				<td>Data4</td>
			</tr>
			<tr>
				<td>Data5</td>
				<td>Data6</td>
				<td>Data7</td>
				<td>Data8</td>
			</tr>
			<tr>
				<td>Data9</td>
				<td>Data10</td>
				<td>Data11</td>
				<td>Data12</td>
			</tr>
		</table>
		<br/>
		<table border="1" class="table-default">
			<tr>
				<th>Header1</th>
				<th>Header2</th>
				<th>Header3</th>
				<th>Header4</th>
			</tr>
			<tr>
				<td>Data1</td>
				<td>Data2</td>
				<td>Data3</td>
				<td>Data4</td>
			</tr>
			<tr>
				<td>Data5</td>
				<td>Data6</td>
				<td>Data7</td>
				<td>Data8</td>
			</tr>
			<tr>
				<td>Data9</td>
				<td>Data10</td>
				<td>Data11</td>
				<td>Data12</td>
			</tr>
		</table>
		
		
		<br/>
		<br/>
		
		<h3>导航</h3>
		<div class="packwtt-tab">
			<ul class="packwtt-tab-title">
				<li class="packwtt-active">网站设置</li>
				<li class="packwtt-normal">用户管理</li>
				<li class="packwtt-normal">权限分配</li>
				<li class="packwtt-normal">商品管理</li>
				<li class="packwtt-normal">订单管理</li>
			</ul>
			
			<div class="packwtt-tab-content" >
				<div data-type="0" class="packwtt-tab-item show">0</div>
			    <div data-type="1" class="packwtt-tab-item hide">1</div>
			    <div data-type="2" class="packwtt-tab-item hide">2</div>
			    <div data-type="3" class="packwtt-tab-item hide">3</div>
			    <div data-type="4" class="packwtt-tab-item hide">4</div>
			    <div data-type="5" class="packwtt-tab-item hide">5</div>
			</div>
		</div>
		
		
		<h3>面板</h3>
		<div class="packwtt-colla">
			<span><i class="demo-icon icon-right-open"></i>李清照</span>
			<div data-type="0" class="colla-content hide">
				李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，
				她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。
				金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，
				后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。
			</div>
		</div>
		
		<h3>分页</h3>
			<div class="page">
				<div class="page-default">
					<ul>
						<li class="page-normal">
							<a >1</a>
						</li>
						<li class="page-active">
							<a >2</a>
						</li>
						<li class="page-normal">
							<a >3</a>
						</li>
						<li class="page-normal">
							<a >4</a>
						</li>
						<li class="page-normal">
							<a >5</a>
						</li>
						<li class="page-normal">
							<a >...</a>
						</li>
					</ul>
				</div>
			</div>
			
			<h3>文件上传1</h3>
			<div class="file-box">
			<!--<form action="" method="post" enctype="multipart/form-data">
				<input type='text' name='textfield' id='textfield' class='txt' value="" />
				<input type='button' class='btn' value='浏览...' />
				<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
				<input type="submit" name="submit" class="btn" value="上传" />
			</form>-->
		    </div>
		    
		    
			<h3>文件上传2</h3>
			<div>
				<input type='text' id="textfield" class="input-default" />
				<input type="file" id="fileField" hidden="" onchange="document.getElementById('textfield').value =this.value;document.getElementById('textfield').focus()" />
				<button class="upload-btn-default" onclick="document.getElementById('fileField').click()"><i class="demo-icon icon-upload"></i>选择要上传的文件</button>
			</div>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script src="js/packagewtt.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
